<template>
    <div class="grid-item" :class="{ expanded }" @click="handleExpand"
        :style="{ 'animation-delay': `${index * 0.05}s` }">
        <div class="initial-content" v-if="!expanded">
            <div class="item-header">
                <img :src="item.image" :alt="item.title" />
                <div class="item-number">{{ index + 1 }}</div>
            </div>
            <div class="item-content">
                <h3 class="item-title">{{ item.title }}</h3>
                <p class="item-description">{{ item.shortDesc }}</p>
            </div>
            <div class="item-footer">
                <div class="item-tag">{{ item.tags[0] }}</div>
                <div>点击查看详情</div>
            </div>
        </div>
        <div class="expanded-content" v-else>
            <div class="expanded-header">
                <img :src="item.image" :alt="item.title" />
            </div>
            <h2 class="expanded-title">{{ item.title }}</h2>
            <p class="expanded-text">{{ item.longDesc }}</p>
            <div class="features">
                <div class="feature">
                    <i class="fas fa-globe-americas"></i>
                    <h3>全球视野</h3>
                    <p>探索全球各地不同文化背景下的独特视角</p>
                </div>
                <div class="feature">
                    <i class="fas fa-lightbulb"></i>
                    <h3>创新思维</h3>
                    <p>突破传统思维框架，激发创造力</p>
                </div>
                <div class="feature">
                    <i class="fas fa-hands-helping"></i>
                    <h3>社区互动</h3>
                    <p>加入全球社区，与志同道合者交流</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    item: Object,
    index: Number,
    expanded: Boolean
})
const emit = defineEmits(['expand'])
function handleExpand() {
    emit('expand', props.item.id)
}
</script>

<style scoped>
/* 复制 grid-item 相关样式 */
</style>